<template>
  <div id="cart">
    <div class="cart_header">
      <moudule-header :head_index="nav_cart_index"/>
    </div>
    <div style="padding-top: 95px"></div>
    <div class="cart_main">
      <el-container>
        <el-header height="40px" style="background: white;border-top: 1px solid black">
          <el-row :gutter="5">
            <el-col :span="2"><div class="grid-content bg-purple color-white">购物车</div></el-col>
            <el-col :span="10"><div class="grid-content bg-purple " style="height: 40px">
              <img src="../assets/img/temp/cartTop01.png" style="height: 40px">
            </div></el-col>
            <el-col :span="12">
              <div style="background: white;text-align: right;height: 40px">
                <el-form :inline="true" :model="form" >
                  <el-form-item label="" >
                    <el-input v-model="selForm.cName" placeholder="请输入商品名称" ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit()">查询</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
<!--            <el-col :span="4"><div class="grid-content "><el-link :underline="false">继续购物</el-link></div></el-col>-->
          </el-row>
        </el-header>
        <el-main style="background: white" >
          <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" show-overflow-tooltip @click="select(selection, row)"></el-table-column>
            <el-table-column prop="cname" label="商品"> </el-table-column>
            <el-table-column prop="csort" label="类别"> </el-table-column>
            <el-table-column label="图片">
              <template  slot-scope="scope">
                <img style="width: 100px;height: 100px" :src="require('@/assets/img/basketball/' + scope.row.cimg)" alt="这是图片">
              </template>
            </el-table-column>
            <el-table-column prop="cprice" label="单价"> </el-table-column>
            <el-table-column label="数量" prop="ccount">
              <template slot-scope="scope">
                <el-row>
                  <i class="el-icon-minus" @click="minus(scope.row)"></i>
                  <input class="input" v-model="scope.row.ccount" />
                  <i class="el-icon-plus" @click="plus(scope.row)"></i>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column prop="ctotalPrice" label="小计"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="del(scope.row)" type="text"
                ><i style="font-size: 25px" class="el-icon-delete"></i
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer height="35px" style="background: white;border-top: 1px solid black">
            <el-row >
              <el-col :span="2">
                <div class="grid-content bg-white">
                  <el-link @click="toggleSelection()">
                    取消全选</el-link>
                </div>
              </el-col>
              <el-col :span="14">
                <div class="block">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  >
                  </el-pagination>
                </div>
              </el-col>
              <el-col :span="6">
                <div class=" fs-15 bg-red">
                  选中{{this.multipleSelection.length}}件商品&nbsp;&nbsp;&nbsp;&nbsp;
                  合计：￥{{cartTotalPrice}}
                </div>
              </el-col>
              <el-col :span="2">
                <div class="grid-content bg-purple-light bg-white color-white">
                  <el-link @click="buyProject">结算</el-link>
                </div>
              </el-col>
            </el-row>
        </el-footer>
      </el-container>
    </div>
  </div>
</template>

<script>
import mouduleHeader from '../components/Common/Header'
export default {
  name: 'Cart',
  components: {
    mouduleHeader
  },
  data () {
    return {
      nav_cart_index: 4, // 设置导航栏中购物车的索引
      tableData: [],
      total: 0,
      page: 1,
      size: 5,
      dialogTableVisible: false,
      form: {
        cName: '',
        cImg: '',
        cPrice: 0,
        cCount: 0,
        cTotalPrice: 0,
        uId: 0
      },
      selForm: {
        cName: '',
        cSort: ''
      },
      formLabelWidth: '120px',
      multipleSelection: []
    }
  },
  mounted () {
    initTable(this)
  },
  methods: {
    // element ui 函数
    onSubmit () {
      initTable(this)
    },
    handleSizeChange (val) {
      // 每页展示条数
      this.size = val
      console.log(`每页 ${val} 条`)
      initTable(this)
    },
    handleCurrentChange (val) {
      // 分页
      this.page = val
      console.log(`当前页：${val}`)
      initTable(this)
    },
    // 直接删除商品
    del (row) {
      console.log(row)
      this.$confirm('此操作将删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(this)
        this.$axios.get('/cart/deleteCart', {
          params: {
            uId: this.$store.state.vuex_user_Info.u_id,
            csNo: row.csNo
          }
        }).then(resp => {
          console.log(resp)
          if (resp.data > 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            initTable(this)
          } else {
            this.$message({
              type: 'info',
              message: '删除失败'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 商品数量减到0是否删除
    delete (row) {
      console.log(row)
      this.$confirm('此操作将删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get('/cart/deleteCart', {
          params: {
            uId: this.$store.state.vuex_user_Info.u_id,
            csNo: row.csNo
          }
        }).then(resp => {
          console.log(resp)
          if (resp.data > 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            initTable(this)
          } else {
            this.$message({
              type: 'info',
              message: '删除失败'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
        row.ccount++
        this.TotalPrice(row)
      })
    },
    getCart (row) {
      console.log(row)
      this.form.cname = row.cname
      this.form.csort = row.csort
      this.form.cprice = row.cprice
      this.form.ccount = row.ccount
      this.form.ctotalPrice = row.ctotalPrice
      this.form.uid = row.uid
    },
    // 获取小计
    TotalPrice (row) {
      row.ctotalPrice = row.ccount * row.cprice
    },
    // 商品数量减少，并且判断商品数量减到为0是否删除商品
    minus (row) {
      if (--row.ccount <= 0) {
        this.delete(row)
      }
      this.TotalPrice(row)
      // console.log(row)
    },
    // 商品数量添加
    plus (row) {
      row.ccount++
      this.TotalPrice(row)
      // console.log(row)
    },
    // 取消全选按钮
    toggleSelection (rows) {
      console.log('取消全选')
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 全选按钮
    handleSelectionChange (val) {
      this.multipleSelection = val
      console.log('全选')
    },
    buyProject () {
      this.$store.state.vuex_order_Info = this.multipleSelection
      if (this.$store.state.vuex_order_Info.length !== 0) {
        this.$router.push('/buy')
      }
    }
  },
  computed: {
    // 获取总价
    cartTotalPrice () {
      let sum = 0
      this.multipleSelection.forEach(item => {
        // console.log(item)
        sum += item.cprice * item.ccount
      })
      // 因为要保留小数点后面两位，所以要toFixed(2)
      return sum.toFixed(2)
      // return 0.0;
    }
  }
}
// 获取后端参数
function initTable ($this) {
  $this.$axios.get('/cart/selectList', {
    params: {
      page: $this.page,
      size: $this.size,
      cName: $this.selForm.cname,
      cSort: $this.selForm.csort,
      uId: $this.$store.state.vuex_user_Info.u_id
    }
  }).then(resp => {
    console.log(resp)
    $this.tableData = resp.data.cartList
    $this.total = resp.data.count
  })
}
</script>

<style lang="less" scoped>
#cart{
  width: 100%;
  height: 100%;
  .cart_header {
    height: 96px;
    width: 100%;
    border-bottom: 2px solid gainsboro;
    position: fixed;
    background: white;
  }
  .cart_main {
    width: 70%;
    height: 610px;
    margin: 0 auto;
    margin-top: 10px;
    background: #9c26b0;
  }
}
/* elemnet样式 ui*/
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 35px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  /*line-height: 160px;*/
  height: 550px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-icon-minus {
  margin-left: -5px;
  font-size: 20px;
}
.input {
  border: none;
  outline: none;
  width: 15px;
  margin-left: 5px;
}
.el-icon-plus {
  font-size: 20px;
  margin-left: 5px;
}
</style>
